import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
    /**
     * @description: 全选
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    checkedAll=(event)=>{
         this.props.checkedAll(event.target.checked)
    }

    /**
     * @description: 清除所有
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    removeAllChecked=()=>{
        this.props.removeAllChecked()
    }

    render() {    
        const {todos}=this.props
        const sum=todos.reduce((pre,item)=>{
            if(item.done){
                pre++
            }
            return pre            
        },0)       

        return (
            <footer>
                <div className="footer_left">
                    <input onChange={this.checkedAll} type="checkbox" checked = {sum === todos.length && todos.length!==0?true:false}/>已完成<span className="done">{sum}</span>/全部<span className="all">{todos.length}</span>
                </div>
                <div className="footer_right">
                    <button onClick={this.removeAllChecked}>清除已完成任务</button>
                </div>
            </footer>
        )
    }
}
